<template>
  <section class="confirm-order-main">
    <section class="address" @click="handleSkipChooseAddress">
      <div class="top">
        <svg class="svg">
          <use xlink:href="#address" />
        </svg>
        <span class="text" v-show="Object.keys(selectAddress).length === 0"
          >请添加一个收货地址</span
        >
        <address-list
          class="text"
          :addresses="[selectAddress]"
          v-show="Object.keys(selectAddress).length"
        />
        <span class="arrow"></span>
      </div>
      <div class="bottom"></div>
    </section>
    <section class="delivery-time">
      <h4 class="left">送达时间</h4>
      <div class="right">
        <span>尽快送达 <i> | </i>预计 {{ orderInfo.delivery_reach_time }}</span>
        <span class="fengniao">蜂鸟专送</span>
      </div>
    </section>
    <section class="payment-method">
      <div class="top">
        <span>支付方式</span>
        <span @click="handleOpenPaymentMethod">在线支付 <i></i> </span>
      </div>
      <div class="bottom">
        <span>红包</span>
        <span>暂时只在饿了么 APP 中支持</span>
      </div>
    </section>
    <section class="goods">
      <div class="title">
        <img :src="shopIntroduction.img" alt="" />
        <h5>{{ shopIntroduction.name }}</h5>
      </div>
      <ul v-if="orderInfo.cart">
        <li v-for="(item, index) in entities[0]">
          <span class="name">{{ item.name }}</span>
          <span class="count"><i>X </i> {{ item.quantity }}</span>
          <span class="price"><i>¥</i> {{ item.price }}</span>
        </li>
        <li>
          <span class="name">{{ orderInfo.cart.extra[0].name }}</span>
          <span>¥ {{ orderInfo.cart.extra[0].price }}</span>
        </li>
        <li>
          <span class="name">配送费</span>
          <span>¥ {{ orderInfo.cart.deliver_amount }}</span>
        </li>
        <li>
          <div class="left name">
            <span>订单</span>
            <span> ¥ {{ orderInfo.cart.original_total }}</span>
          </div>
          <div class="right count" :style="{ marginRight: 0 }">
            <span>待支付</span>
            <span> ¥ {{ orderInfo.cart.total }}</span>
          </div>
        </li>
      </ul>
    </section>
    <section class="order-notes" @click="handleSkipRemark">
      <span>订单备注</span>
      <span class="tips"
        ><i v-show="!Object.keys(selectTag).length">口味、偏好等</i>
        <span v-show="Object.keys(selectTag).length !== 0" class="tag">{{
          selectTagText | joinTag(This)
        }}</span>
        <i class="arrow"></i
      ></span>
    </section>
    <section
      class="invoice-title"
      v-if="orderInfo.invoice"
      @click="handleSkipInvoice"
    >
      <span>发票抬头</span>
      <span class="tips"
        ><i>{{ orderInfo.invoice.status_text }}</i> <i class="arrow"></i
      ></span>
    </section>
  </section>
</template>

<script>
import AddressList from "components/content/address/AddressList";

export default {
  data() {
    return {
      selectTagText: [],
      repeatTag: [],
      tagContent: "",
      This: this,
    };
  },
  props: {
    orderInfo: {
      type: Object,
      default() {
        return {};
      },
    },
    entities: {
      type: Array,
      default() {
        return [];
      },
    },
    shopIntroduction: {
      type: Object,
      default() {
        return {};
      },
    },
    selectAddress: {
      type: Object,
      default() {
        return {};
      },
    },
    selectTag: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  watch: {
    selectTag: {
      handler(newVal) {
        if (!Object.values(this.selectTagText).length) {
          this.selectTagText = newVal.concat();
        }
        for (const iterator of newVal) {
          for (const value of Object.values(this.selectTagText)) {
            if (iterator.sequence === value.sequence) {
              value.text = iterator.text;
            } else {
              !JSON.stringify(this.selectTagText).includes(iterator.sequence)
                ? this.selectTagText.push(iterator)
                : "";
            }
          }
        }
      },
      deep: true,
    },
  },
  filters: {
    joinTag(val, This) {
      let str = "";
      for (const iterator of val) {
        if (iterator.text) {
          if (val[val.length - 1] === iterator) {
            str += `${iterator.text}`;
          } else {
            str += `${iterator.text}，`;
          }
        }
      }
      This.$emit("handleTagContent", str);
      return str;
    },
  },
  methods: {
    handleSkipChooseAddress() {
      this.$router.push({
        path: "/confirmOrder/ChooseAddress",
        query: { id: this.orderInfo.cart.id, sig: this.orderInfo.sig },
      });
    },
    handleOpenPaymentMethod() {
      this.$emit("handleOpenPaymentMethod");
    },
    handleSkipRemark() {
      this.$router.push("/confirmOrder/remark?");
    },
    handleSkipInvoice() {
      this.$router.push("/confirmOrder/invoice");
    },
  },
  components: { AddressList },
};
</script>
<style lang="less" scoped>
@import url("assets/css/mixin");
.confirm-order-main {
  color: #333333;

  .address {
    background-color: #fff;
    .top {
      display: flex;
      align-items: center;
      padding: 10px 15px;
      .svg {
        width: 20px;
        height: 60px;
        margin-right: 10px;
      }
      .text {
        flex: 1;
      }
      .arrow {
        .right-arrow();
      }
    }
    .bottom {
      height: 2px;
      background-image: url("~assets/img/confirmOrder/address_bottom.png");
      background-size: 7% 100%;
    }
  }
  .delivery-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 20px;
    border-left: 3px solid #3190e8;
    margin: 10px 0;
    background-color: #fff;
    .right {
      text-align: right;
      color: #4998e8;
      & span:nth-child(1) {
        display: block;
        margin-bottom: 10px;
      }
      .fengniao {
        padding: 3px;
        border-radius: 3px;
        background-color: #3190e8;
        font-size: 10px;
        color: #fff;
      }
    }
  }
  .payment-method {
    padding: 0 15px;
    background-color: #fff;
    .top,
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      font-size: 14px;
      color: #b2b2c8;
    }
    .top {
      border-bottom: 1px solid #eaeaea;

      & span:nth-child(1) {
        font-size: 16px;
        color: #666666;
      }
      & span:nth-child(2) {
        i {
          .right-arrow();
        }
      }
    }
  }
  .goods {
    margin: 10px 0;
    background-color: #fff;
    .title {
      padding: 20px 15px;
      border-bottom: 1px solid #eaeaea;
      img {
        width: 30px;
        margin-right: 10px;
        vertical-align: middle;
      }
      h5 {
        display: inline-block;
      }
    }
    ul {
      padding: 15px;
      li {
        display: flex;
        align-items: center;
        padding: 15px 0;
        font-size: 15px;
        color: #666666;
        .name {
          flex: 1;
        }
        .count {
          color: #ff6600;
          i {
            font-size: 11px;
          }
        }
        .price {
          width: 70px;
          text-align: right;
        }
      }
    }
  }
  .order-notes,
  .invoice-title {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    color: #666666;
    .tips {
      font-size: 14px;
      color: #aaaaaa;
      .arrow {
        margin-left: 5px;
        .right-arrow();
      }
      .tag {
        position: relative;
        top: 2px;
        display: inline-block;
        width: 250px;
        text-align: right;
        .spill-over();
      }
    }
  }
}
</style>